<template>
	<widget-root :styles="styles" v-if="leaderpage.name != ''">
		<view class="center-box">
			<view class="leader-info p-20 flex" :style="{
			        'background-color': styles.bg_color, 
			        'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`
			    }">
				<view class="avatar m-r-20">
					<image
						:src="leaderpage.avatar ? $getImageUri(leaderpage.avatar) : $getImageUri('resource/image/shopapi/uniapp/icon_portrait.png')">
					</image>
				</view>
				<view class="info">
					<view class="name flex" v-if="content.show_name">
						<text :style="{
              color: styles.name_color,
            }">{{leaderpage.name}}</text>
						<view class="badge m-l-10" :style="{
							backgroundImage: `url(${$getImageUri('resource/image/shopapi/uniapp/leader-badge.png')})`
						}">{{$zhTran('团长')}}</view>
					</view>
					<view v-if="content.show_phone" :style="{
            color: styles.phone_color,
          }">{{$zhTran('联系电话')}}: {{leaderpage.phone}}</view>
					<view v-if="content.show_pickup_address" :style="{
            color: styles.pickup_address_color,
          }">{{$zhTran('提货地址')}}: {{leaderpage.pick_address}}</view>
				</view>
				<router-link class="change-leader" to="/bundle2/pages/community_group_purchase/user/exchange_leader"
					v-if="content.show_btn" :style="[btnStyle]">
					{{ content.btn_text == '' ? $zhTran('切换团长') :content.btn_text}}
				</router-link>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	import {
		location_key
	} from "@/config/app";
	import {
		apiCommunityGroupPurchaseNearLeaderDetail
	} from "@/api/community_group_purchase"
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {
				location: {}, // 我的位置
				authLocation: 0,
				leaderpage: {
					name: '',
					avatar: '/resource/image/shopapi/default/avatar.png',
					phone: '',
					region_address: '',
					pick_address: ''
				},
			}
		},
		computed: {
			btnStyle() {
				const {
					btn_bg_color,
					btn_color,
					btn_border_radius,
					btn_border_color
				} = this.styles;
				const style = {
					"background-color": btn_bg_color,
					'color': btn_color,
					"border-radius": `${btn_border_radius}px`,
					"border-color": btn_border_color,
				};
				return style;
			}
		},
		methods: {
			// 获取位置
			async getLocation() {
				const [error, data] = await uni.getLocation({
					type: 'gcj02'
				})
				// #ifdef MP
				if (!data) return this.getAuthorize()
				// #endif
				// #ifdef APP-PLUS
				if (!data) return this.$toast({
					title: this.$zhTran('获取位置失败')
				})
				// #endif
				return {
					latitude: data.latitude,
					longitude: data.longitude
				}
			},

			// 位置授权
			async getAuthorize() {
				const [error, data] = await uni.showModal({
					title: this.$zhTran('您已拒绝地理位置权限'),
					content: this.$zhTran('是否进入权限管理，调整授权？')
				})

				if (data.confirm) {
					const [error, data] = await uni.openSetting()
					if (data) this.getLocation()
				} else if (data.cancel) {
					this.$Router.back()
				}
			},
			getNearLeaderList() {
				apiCommunityGroupPurchaseNearLeaderDetail({
					location: this.location,
					mapkey: location_key,
					authLocation: this.authLocation,
				}).then(({
					data,
				}) => {
					console.log('leaderpage', data)
					this.leaderpage = data
				}).catch(() => {})
			},
		},
		async created() {
			var that = this
			uni.getSetting({
				success(res) {
					var authLocation = 0
					if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
							'scope.userLocation']) {
						authLocation = 1
					}
					that.authLocation = authLocation
				}
			})
			try {
				console.log(this.authLocation)
				if (this.authLocation) {
					const data = await this.getLocation()
					if (!data) throw new Error(this.$zhTran('位置获取失败'))
					this.location = data
				}

				await this.getNearLeaderList()
			} catch (err) {
				console.log(err)
				this.$toast({
					title: this.$zhTran(err.message)
				})
			}
		}

	};
</script>

<style lang="scss" scoped>
	.center-box {

		.leader-info {
			width: 100%;
			position: relative;

			.avatar {
				width: 100rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100rpx;
				}
			}

			.info {
				width: calc(100% - 100rpx);
				font-size: 24rpx;

				&>view {
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 28rpx;
					font-weight: bold;

					.badge {
						background-repeat: no-repeat;
						background-size: 100% 100%;
						color: #fff;
						padding: 6rpx 15rpx;
						font-size: 22rpx;
					}
				}
			}

			.change-leader {
				background-color: rgba(255, 208, 0, 1);
				font-size: 24rpx;
				padding: 8rpx 14rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				border-radius: 4rpx;
			}

		}
	}
</style>